<template>
	<!-- #ifdef H5 -->
	<view class="u-m-t-30">
	<!-- #endif -->
	<!-- #ifndef H5 -->
	<view class="">
	<!-- #endif -->
		<view class="" v-for="(item,index) in recCateList" :key="index">
			<view class="d-flex j-sb px-20" style="height: 375rpx;width: 100%;background-color: #1BBF80;">
				<view class="white-color d-flex flex-column u-m-t-30">
					<text class="u-font-26 u-p-b-10 u-p-t-20" style="border-bottom: 3rpx solid #FFFFFF;">{{ item.cateDesc }}</text>
					<text class="u-font-36 font-weight u-m-t-20">{{ item.cateName }}</text>
				</view>
				<image :src="item.cateThumb" mode="" class="img-160 u-m-t-30"></image>
			</view>
			<template v-if="item.cateStyle == 1">
				<view class="bg-white-color shadow u-border-radius d-flex flex-wrap" style="width: 710rpx;height: 350rpx;margin: -175rpx auto 30rpx;">
					<view v-for="(itemOne,indexOne) in item.secondCate" :key="indexOne" class="" >
						<view :class="[index % 2 === 0 ? 'cateRight' : '',(index == 0 || index == 1) ? 'cateBottom' : '']" class="d-flex j-sb" style="width: 355rpx;height: 175rpx;">
							<view class="black-color u-m-t-30 u-m-l-20">
								<text class="u-p-b-10" style="border-bottom: 2rpx solid #1BBF80;">{{ itemOne.cateName }}</text>
							</view>
							<image :src="itemOne.cateThumb" mode="" class="img-160 a-self-end"></image>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="bg-white-color shadow u-border-radius d-flex flex-wrap j-sa" style="width: 710rpx;height: 350rpx;margin: -175rpx auto 30rpx;">
					<view class="" v-for="(itemOne,indexOne) in item.secondCate" :key="indexOne">
						<view v-if="indexOne % 2 == 0" class="h-100 d-flex flex-column j-sb py-20 a-center" style="flex:1;border-right: 1rpx solid #CCCCCC;">
							<text class="u-font-26 font-weight u-m-t-20 u-p-b-10" style="border-bottom: 2rpx solid #1BBF80;">{{ itemOne.cateName }}</text>
							<image src="https://www.onenessxy.com/uploads/20210728/d85d6777d309af14c6a6435c00eb2cd0.png" mode="" class="img-160"></image>
						</view>
						<view v-else :style="indexOne % 3 == 0 ? '' : 'border-right:1rpx solid #cccccc;'" class="h-100 d-flex flex-column j-sb py-20 a-center" style="flex:1;">
							<image :src="itemOne.cateThumb" mode="" class="img-160"></image>
							<text class="u-font-26 font-weight u-m-t-20 u-p-b-10" style="border-bottom: 2rpx solid #1BBF80;">{{ itemOne.cateName }}</text>
						</view>
					</view>
				</view>
			</template>
			<h-goods-list :goodsList = "item.cateGoodsList"></h-goods-list>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			recCateList:{
				type:Array,
				default:[]
			}
		}
	}
</script>

<style>
	.cateRight {
		border-right: 1rpx solid #CCCCCC;
	}
	
	.cateBottom {
		border-bottom: 1rpx solid #CCCCCC;
	}
</style>
